import React, { useEffect, useRef, useState } from 'react';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import {getStockDiffQuantity} from "@/services/echart/api";
import {Bar} from "@ant-design/charts";
import {Card} from "antd";

// 修改组件名
const StockDiffPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [data, setData] = useState<StockVO[]>([]);

  const columns: ProColumns<API.StockDiffQuantity>[] = [
    {
      title: '仓库编码',
      width: 120,
      dataIndex: 'warehouseCode',
      editable: false,
      hideInSearch: true,
    },
    {
      title: '仓库名称',
      width: 120,
      dataIndex: 'warehouseName',
      editable: false,
      hideInSearch: true,
    },
    {
      title: '货品编码',
      width: 120,
      dataIndex: 'goodsCode',
      hideInSearch: true,
      editable: false,
    },
    {
      title: '货品名称',
      width: 120,
      dataIndex: 'goodsName',
      editable: false,
      hideInSearch: true,
    },
    {
      title: '要货数量',
      hideInSearch: true,
      width: 120,
      dataIndex: 'safeStock',
    },
    {
      title: '库存数量',
      hideInSearch: true,
      width: 120,
      editable: false,
      dataIndex: 'quantity',
    },

    {
      title: '缺货数量',
      hideInSearch: true,
      width: 120,
      dataIndex: 'diffQuantity',
    },
  ];

  const loadData = async () => {
    const res = await getStockDiffQuantity();
    if (res.code != 0) {
      console.error('库存数据加载失败', res.message);
      return;
    }
    setData(res?.data || []);
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <>
      <Card>
        <Bar {...{
          data: data,
          xField: 'warehouseName',
          yField: 'diffQuantity',
          colorField: 'goodsName',
          stack: true,
          sort: {
            reverse: true,
            by: 'y',
          },
          axis: {
            y: { labelFormatter: '~s' },
            x: {
              labelSpacing: 4,
              style: {
                labelTransform: 'rotate(90)',
              },
            },
          },
        }}/>
      </Card>
      <ProTable<StockVO>
        columns={columns}
        actionRef={actionRef}
        cardBordered
        dataSource={data}
        request={async () => {
          await loadData();
          return data;
        }}
        searchFormRender={() => <></>}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        headerTitle="仓库缺货信息"
      />
    </>
  );
};

export default StockDiffPage;
